<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

		<style type="text/css">
			table,th,td {
				border: 1px solid #000000;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="panel panel-danger">
				
			<div class="panel-heading">
				<h3 class="panel-title">比赛进行中</h3>
			</div>
				
			<div class="panel-body">
				<table class="table table-hover" border="1">
				<thead>
					<tr>
						<th style="text-align: center;">选手号</th>
						<th style="text-align: center;">评分</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="user in user_list">
						<td style="text-align: center;">{{user[0]}}</td>
						<td style="text-align: center;">
							<input type="text" value="">
							<button type="button" @click="update" class="btn btn-danger">确认修改</button>
						</td>
					</tr>
				</tbody>
				</table>
			</div>
			
				<a href="displayResult.html">
					<div style="text-align: center;margin:0px 10px 30px 10px">
					<button type="button" class="btn btn-danger">完成评分</button>
					</div>
				</a>

			</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: ".container",
				data: {
					user_list: ""
				},
				methods:{
					update:function(event){
 						var input = $(event.currentTarget).siblings()[0];
						var id = $(event.currentTarget).parent().siblings()[0];
						id = id.innerHTML;
						$.ajax({
							url:"2.php",
							type:"GET",
							data:{"id":id ,"score":input.value},
							success:(result)=> {
								console.log(result);
							}
						})
						
					}
				}
			})
			$(document).ready(function() {
				$.ajax({
					url: "1.php",
					type: "GET",
					success: (result) => {
						console.log(result);
						vm.user_list = JSON.parse(result).user_list;
					}
				})
			})
		</script>
	</body>
</html>
